import echarts from "echarts";

export function SingleLine(config) {
  const myChart = echarts.init(config.ref);
  let option = {
    legend: {
      color: ['#0880DF', '#3D9B38', '#ED7109', '#E61219'],
      left: 'center',
      top: 'top',
      right: '3%',
      itemWidth: 11,
      itemHeight: 11,
      textStyle: {
        color: 'rgba(0, 0, 0, .5)',
        fontSize: 16
      }
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        name: config.titleX,
        data: config.name,
        axisLabel: {
          fontSize: 14,
          color: 'rgba(0, 0, 0, .5)',
          formatter: function (value = "") {
            return value.split(" ").join("\n");
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(0, 0, 0, .5)'
          }
        },
      }
    ],
    yAxis: [{
      type: 'value',
      name: "A",
      nameTextStyle: {
        fontSize: 14,
        padding: 10,
      },
      minInterval: 1,
      axisTick: {
        show: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        fontSize: 14,
        formatter: '{value}',
        color: 'rgba(0, 0, 0, .5)'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: 'rgba(0, 0, 0, .5)'
        }
      },
    }],
    series: config.data.map(v => ({
      name: v.name,
      type: 'line',
      lineGap: 0,
      data: v.data,
      color: v.color,
    })),
  }


  myChart.setOption(option, true)
}

